<template>
  <div class="mt-p-address-areas">
    <group v-if="areas.length>0">
      <cell
      v-for="(area, index) in areas" 
      :key="index" 
      :title="area.name"
      @click.native="handleAreaClick(area)"
      is-link></cell>
    </group>
    <nomore v-else></nomore>
  </div>
</template>

<script>
import { Group, Cell } from "vux"
import Nomore from "./nomore"

export default {
  data() {
    return {
      areas: []
    }
  },
  mounted() {
    this.getAreas(this.cityId)
  },
  methods: {
    async getAreas(cid) {
      this.areas = await this.$store.dispatch("getAreas", cid)
      return
    },
    handleAreaClick(area) {
      this.$store.commit('setDemandArea', area)
      this.$router.push("/trade/demands/post/address/towns")
    }
  },
  computed: {
    cityId() {
      return this.$store.state.posts.demand.city.id
    }
  },
  watch: {
    cityId(cid) {
      this.getAreas(cid)
    }
  },
  components: { Group, Cell, Nomore }
}
</script>

<style lang="scss">
@import "../../../../../styles/index.scss";
</style>
